<template>
    <div class="my-filter-complex">

        <div class="my-fc-name" style="display: flex;margin-bottom: 10px;">
            <vxe-select v-model="demo1.option.data.value"  clearable style="width: 90px;">
                <vxe-option  value="大于" label="大于"></vxe-option>
                <vxe-option  value="等于" label="等于"></vxe-option>
                <vxe-option  value="小于" label="小于"></vxe-option>
            </vxe-select>
            <vxe-input v-model="demo1.option.data.name" type="text" placeholder="请输入名称"
                @input="changeOptionEvent()"></vxe-input>
        </div>
        <div class="my-fc-footer">
            <vxe-button status="primary" @click="confirmEvent">确认</vxe-button>
            <vxe-button @click="resetEvent">重置</vxe-button>
        </div>
    </div>
</template>

<script>


export default {
    name: 'FilterComplex',
    props: {
        params: {}
    },
    setup(props) {
        const demo1 = reactive({
            option: null
        })

        const load = () => {
            const { params } = props
            if (params) {
                const { column } = params
                const option = column.filters[0]
                demo1.option = option
            }
        }

        const changeOptionEvent = () => {
            const { params } = props
            const { option } = demo1

            if (params && option) {
                const { $panel } = params
                const checked = !!option.data.name
                $panel.changeOption(null, checked, option)
            }
        }

        const confirmEvent = () => {
            const { params } = props
            if (params) {
                const { $panel } = params
                $panel.confirmFilter()
            }
        }

        const resetEvent = () => {
            const { params } = props
            if (params) {
                const { $panel } = params
                $panel.resetFilter()
            }
        }

        load()

        return {
            demo1,
            changeOptionEvent,
            confirmEvent,
            resetEvent
        }
    }
}
</script>

<style scoped>
.my-filter-complex {
    width: 260px;
    padding: 5px 15px 10px 15px;
}

.my-filter-complex .my-fc-type {
    padding: 8px 0;
}

.my-filter-complex .my-fc-footer {
    text-align: center;
}</style>
